<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/index.css" />
    <!-- <script src="/js/jquery-3.4.1.min.js"></script> -->
    <link rel="stylesheet" href="editor.md-master/css/editormd.min.css" />

    <style>
        .tip {
            font-weight: bold;
            height: 50px;
            line-height: 50px;
            margin-left: 20px;
            background: #f6f6f6;
        }
        
        .selectTopic {
            display: flex;
            flex-direction: row;
            height: 60px;
            line-height: 60px;
            background: #fff;
            align-items: center;
        }
        
        .inner {
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 上面的navbar -->
        <div id="header"></div>
        <!-- 下面的主体部分 -->
        <div class="main">
            <div class="maintitle">
                <a href="/index" style="color: #80bd01;">主页</a> / 设置
            </div>
            <div class="inner">
                <div class="selectTopic">
                    <label for="name" style="margin: 0 15px;">选择板块</label>
                    <select style="height: 40px; width: 200px;">
              <option selected disabled>请选择</option>
              <option value="share">分享</option>
              <option value="ask">问答</option>
              <option value="job">招聘</option>
              <option value="dev">测试</option>
            </select>
                </div>
                <div style="margin: 10px;">
                    <input type="text" class="form-control" id="inputPassword" placeholder="请输入标题" />
                </div>
                <div id="my-editormd">
                    <textarea class="editormd-markdown-textarea" name="doc" style="display: none;"></textarea>
                    <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
                    <textarea class="editormd-html-textarea" name="html"></textarea>
                </div>
                <div style="margin: 40px;">
                    <button type="button" class="btn btn-primary" onclick="publish()">
              发布
            </button>
                </div>
            </div>
        </div>
    </div>
    <script src="editor.md-master/examples/js/jquery.min.js"></script>
    <script src="editor.md-master/editormd.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <script>
        $("#header").load("http://localhost:8686/header");
        var testEditor;

        $(function() {
            testEditor = editormd("my-editormd", {
                width: "90%",
                emoji: true,
                height: 640,
                syncScrolling: "single",
                path: "editor.md-master/lib/",
                //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
                saveHTMLToTextarea: true,
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "http://localhost:8686/uploadImg", //注意你后端的上传图片服务地址
                onload: function() {
                    this.width("100%");
                    this.height(480);
                },
            });
        });

        function publish() {
            let details = {
                tab: $("select").val(),
                title: $("#inputPassword").val(),
                content: $(".editormd-html-textarea").val(),
            };
            $.ajax({
                url: "http://localhost:8686/publishTopic",
                type: "Post",
                dataType: "json",
                async: false,
                data: details,
                success: function(res) {
                    location.href = `http://localhost:8686/index?tab=${details.tab}&page=1`;
                },
                error: function(err) {
                    console.log(err);
                },
            });
        }
    </script>
</body>

</html>